<!DOCTYPE html>
<html>

	<head>
		<title>GeoJSON example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>

		<style type="text/css">
			/*比例尺控件*/
			
			.ol-scale-line {
				background-color: rgba(255, 255, 255, 0);
			}
			.ol-scale-line-inner {
				color: black;
				border-color: black;
			}
			/*放大 +*/
			
			.zoomIn {
				background: url(img/standard2.png) no-repeat 0 0;
				width: 26px;
				height: 24px;
				position: absolute;
				top: 42px;
				left: 7px;
				z-index: 2;
				cursor: pointer;
			}
			/*缩小-*/
			
			.zoomOut {
				background: url(img/standard2.png) no-repeat 0 -204px;
				width: 26px;
				height: 24px;
				position: absolute;
				top: 242px;
				left: 7px;
				z-index: 2;
				cursor: pointer;
			}
			/*下拉条*/
			
			.ol-zoomslider {
				background: url(img/standard2.png) no-repeat 0 -24px;
				width: 26px;
				height: 181px;
			}
			/*拖动滑块*/
			
			.ol-zoomslider-thumb {
				background: url("img/standard2.png") no-repeat -26px -68px;
				height: 11px;
				width: 20px;
			}
			/*全屏*/
			
			.ol-full-screen {
				background-color: transparent;
			}
			.ol-full-screen-false {
				background-color: white ! important;
				color: #000000 ! important;
			}
		</style>

	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map">
					</div>
				</div>
			</div>

		</div>
		<script>
			var control = document.getElementById("control");
			var scaleLine = new ol.control.ScaleLine();
			var zoomSlider = new ol.control.ZoomSlider();
			var zoom = new ol.control.Zoom();
			var vectorLayer = new ol.layer.Vector({
				source: new ol.source.Vector(),
				style: [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: '#666',
						width: 4,
						zIndex: 1
					})
				}), new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'white',
						width: 2,
						lineDash: [10, 3],
						zIndex: 2
					})
				}), new ol.style.Style({
					image: new ol.style.Circle({
						radius: 5,
						stroke: new ol.style.Stroke({
							color: 'red',
							width: 2
						})
					}),
					geometry: function(feature) {
						var coordinates = feature.getGeometry().getCoordinates();
						return new ol.geom.MultiPoint(coordinates);
					}
				})]
			});
			var feature = new ol.Feature(new ol.geom.LineString([
				[4e6, -2e6],
				[8e6, 2e6]
			]));
			feature.on("mouseover", function(evt) {
				alert(1);
			});
			/*	var opacity = 0.5
				feature.setStyle(new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'rgba(255, 0, 0, ' + opacity + ')',
						width: opacity*4
					})
				}));*/
			var point = new ol.Feature(new ol.geom.Point([5e6, 1e6]));
			point.setStyle(new ol.style.Style({
				image: new ol.style.Icon({
					opacity: 0.95,
					src: 'img/u234.png'
				})
			}));
			vectorLayer.getSource().addFeature(feature);
			vectorLayer.getSource().addFeature(point);
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					}),
					vectorLayer
				],
				target: 'map',
				view: new ol.View({
					center: [0, 0],
					zoom: 2
				}),
				controls: [
					new ol.control.FullScreen(), scaleLine, zoomSlider, new ol.control.MousePosition()
				]
			});

			function add() {
				feature.getGeometry().setCoordinates([
					[4e6, -2e6],
					[5e6, 1e6],
					[8e6, 2e6]
				]);
			}

			function zoomIn() {
				var zoom = map.getView().getZoom();
				map.getView().setZoom(zoom + 1);
			}

			function zoomOut() {
				var zoom = map.getView().getZoom();
				map.getView().setZoom(zoom - 1);
			}
			$(".ol-overlaycontainer-stopevent").prepend("<div id='' class='zoomIn' onclick='zoomIn()'></div>");
			$(".ol-overlaycontainer-stopevent").prepend("<div id='' class='zoomOut' onclick='zoomOut()'></div>");
			var features = new ol.Collection();
			var draw = new ol.interaction.Draw({
				features: features,
				source: vectorLayer.getSource(),
				type: "LineString"
			});
			var featureNew;
			draw.on("mousemove", function(evt) {
				console.log(evt);
			});
			/*			function Drag(){
							ol.interaction.Draw.call(this, {
								handleDownEvent: Drag.prototype.handleDownEvent,
								handleMoveEvent: Drag.prototype.handleMoveEvent
							});
							this.coordinate_ = null;
							this.cursor_ = 'pointer';
							this.feature_ = null;
							this.previousCursor_ = undefined;
						}
						ol.inherits(Drag, ol.interaction.Pointer);*/
			 //click在画笔触发后执行
			 //			map.on("click", function(evt) {
			 //				var coordinate = evt.coordinate;
			 //				if (coordinate[0] < 0) {
			 //					/*var arr = featureNew.getGeometry().getCoordinates();
			 //					arr.pop();
			 //					arr.pop();
			 //					arr.push([0,0]);
			 //					arr.push([0,0]);*/
			 //					featureNew.getGeometry().appendCoordinate([0, 0]);
			 //				}
			 //			});
			var modify = new ol.interaction.Modify({
				features: new ol.Collection([feature]),
			});
			/*modify.on("modifystart",function(evt){
				console.log(evt);
			});*/
			modify.on("modifystart", function(evt) {
				console.log("modifystart");
			});
			modify.setActive(true);
			 //			map.addInteraction(modify);
			map.on("click", function(evt) {
				var featureNew = map.forEachFeatureAtPixel(evt.pixel,
					function(feature, layer) {
						return feature;
					}
				);
				if (featureNew) {
					var coordinates = feature.getGeometry().getCoordinates();
					for (var i = 0; i < coordinates.length; i++) {
						if (coordinates[0][0] + 100000 > evt.coordinate[0] && coordinates[0][0] - 100000 < evt.coordinate[0]) {
							modify.setActive(true);
							return;
						}
					}
					modify.setActive(false);
				}
			});
			var select = new ol.interaction.Select({
				style: new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: "rgba(255,0,0,0.3)",
						width: 7
					}),
					zIndex: 0
				}),
			});
			 //			map.addInteraction(select);
			var source = vectorLayer.getSource();
			var MapUtil = {
				/**
				 * 定位feature
				 * @param {Object} feature
				 */
				location: function(feature) {
					var geom = feature.getGeometry();
					var duration = 2000;
					var start = +new Date();
					var pan = ol.animation.pan({
						duration: duration,
						start: start,
						source: view.getCenter()
					});
					var bounce = ol.animation.bounce({
						duration: duration,
						resolution: 4 * view.getResolution(),
						start: start
					});
					var zoom = ol.animation.zoom({
						resolution: view.getResolution()
					});
					map.beforeRender(pan, bounce, zoom);
					if (view.getZoom() < maxZoom) {
						view.setZoom(view.getZoom() + 1);
					}
					if (geom instanceof ol.geom.Point) {
						view.setCenter(geom.getFirstCoordinate());
					} else if (geom instanceof ol.geom.LineString) {
						var coor = [];
						coor[0] = (geom.getFirstCoordinate()[0] + geom.getLastCoordinate()[0]) / 2;
						coor[1] = (geom.getFirstCoordinate()[1] + geom.getLastCoordinate()[1]) / 2;
						view.setCenter(coor);
					} else if (geom instanceof ol.geom.Polygon) {
						view.setCenter(geom.getInteriorPoint().getFirstCoordinate());
					}
				},
				/**
				 * ol.feature
				 * @param {Object} linStrig
				 */
				lineHight: function(linStrig) {
					var newFeature = linStrig.clone();
					newFeature.setStyle(new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'rgba(255, 0, 0, ' + 0.3 + ')',
							width: 10,
							zIndex: 0
						})
					}));
					var interval = setInterval(function() {
						source.addFeature(newFeature);
						setTimeout(function() {
							source.removeFeature(newFeature);
						}, 200);
					}, 500);
					setTimeout(function() {
						clearInterval(interval);
					}, 5000);
				},
				pointHight: function(point) {
					var interval = setInterval(function() {
						source.removeFeature(point);
						setTimeout(function() {
							source.addFeature(point);
						}, 200);
					}, 500);
					setTimeout(function() {
						clearInterval(interval);
					}, 5000);
				}
			}
			MapUtil.lineHight(feature);
			MapUtil.pointHight(point);
			 //			map.addInteraction(draw);
			setTimeout(function() {
				$("canvas").click();
			}, 6000);
			if (this.mode_ === ol.interaction.DrawMode.LINE_STRING) {
				var feature = source.getClosestFeatureToCoordinate(start);
				if (feature && feature instanceof ol.geom.Point) {
					start = feature.getFirstCoordinate();
				}
			}
			var select = new ol.interaction.Select({
				style: ol.style.Style({
					image: new ol.style.Circle({
						radius: 5
					}),
					stroke: new ol.style.Stroke({
						color: "red"
					}),
					zIndex: 0
				}),
			});
			var snap = new ol.interaction.Snap({
				source: source,
				features: new ol.Collection([feature])
			});
			var dragBox = new ol.interaction.DragBox({
				style: new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: "red"
					}),
				}),
				condition: ol.events.condition.altKeyOnly
			});
			dragBox.on("boxend", function(evt) {
				var geom = this.getGeometry();
				console.log(geom.getExtent());
				console.log(geom.getCoordinates());
			});
			select.setActive(true);
			map.addInteraction(dragBox);
			draw.handleUpEvent_ = function(event) {
				var start = event.coordinate;
				var wo_tolerance = 50;
				var wo_start_meter = ol.proj.fromLonLat(start);
				var wo_extent = ol.proj.transformExtent([wo_start_meter[0] - wo_tolerance, wo_start_meter[1] - wo_tolerance, wo_start_meter[0] + wo_tolerance, wo_start_meter[1] + wo_tolerance], "EPSG:3857", "EPSG:4326");
				if (this.mode_ === ol.interaction.DrawMode.LINE_STRING) {
					source.forEachFeatureIntersectingExtent(wo_extent, function(feature) {
						if (feature.getGeometry() instanceof ol.geom.Point) {
							MapUtil.flash(feature);
							event.coordinate = feature.getGeometry().getLastCoordinate();
						}
					});
				} else if (this.mode_ === ol.interaction.DrawMode.POINT) {
					source.forEachFeatureIntersectingExtent(wo_extent, function(feature) {
						if (feature.getGeometry() instanceof ol.geom.LineString) {
							event.coordinate = feature.getGeometry().getLastCoordinate();
						}
					});
				}
				this.freehand_ = false;
				var downPx = this.downPx_;
				var clickPx = event.pixel;
				var dx = downPx[0] - clickPx[0];
				var dy = downPx[1] - clickPx[1];
				var squaredDistance = dx * dx + dy * dy;
				var pass = true;
				if (squaredDistance <= this.squaredClickTolerance_) {
					this.handlePointerMove_(event);
					if (goog.isNull(this.finishCoordinate_)) {
						this.startDrawing_(event);
						if (this.mode_ === ol.interaction.DrawMode.POINT) {
							this.finishDrawing();
						}
					} else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) {
						this.finishDrawing();
					} else if (this.atFinish_(event)) {
						this.finishDrawing();
					} else {
						this.addToDrawing_(event);
					}
					pass = false;
				}
				return pass;
			};
			draw.__proto__.modifyDrawing_ = function(event) {
				var coordinate = event.coordinate;
				var geometry = this.sketchFeature_.getGeometry();
				goog.asserts.assertInstanceof(geometry, ol.geom.SimpleGeometry,
					'geometry should be ol.geom.SimpleGeometry or subclass');
				var coordinates, last;
				if (this.mode_ === ol.interaction.DrawMode.POINT) {
					last = this.sketchCoords_;
				} else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
					coordinates = this.sketchCoords_[0];
					last = coordinates[coordinates.length - 1];
					if (this.atFinish_(event)) {
						// snap to finish
						coordinate = this.finishCoordinate_.slice();
					}
				} else {
					coordinates = this.sketchCoords_;
					last = coordinates[coordinates.length - 1];
				}
				if (this.mode_ != ol.interaction.DrawMode.POINT && ol.events.condition.shiftKeyOnly(event)) {
					var geomLast = coordinates[coordinates.length - 2];
					var angle = Math.atan((coordinate[1] - geomLast[1]) / (coordinate[0] - geomLast[0]));
					var angleabs = Math.abs(angle);
					if (angleabs <= Math.PI / 6) {
						coordinate = [coordinate[0], geomLast[1]];
					} else if (Math.PI / 6 < angleabs && angleabs < (Math.PI / 3)) {
						if (angle > 0) {
							var x = (geomLast[0] - geomLast[1] + coordinate[0] + coordinate[1]) / 2;
							var y = (geomLast[1] - geomLast[0] + coordinate[0] + coordinate[1]) / 2;
						} else {
							var x = (geomLast[0] + geomLast[1] + coordinate[0] - coordinate[1]) / 2;
							var y = (geomLast[1] + geomLast[0] + coordinate[1] - coordinate[0]) / 2;
						}
						coordinate = [x, y];
					} else if (angleabs >= Math.PI / 3) {
						coordinate = [geomLast[0], coordinate[1]];
					}
				}
				last[0] = coordinate[0];
				last[1] = coordinate[1];
				goog.asserts.assert(!goog.isNull(this.sketchCoords_),
					'sketchCoords_ must not be null');
				this.geometryFunction_(this.sketchCoords_, geometry);
				if (!goog.isNull(this.sketchPoint_)) {
					var sketchPointGeom = this.sketchPoint_.getGeometry();
					goog.asserts.assertInstanceof(sketchPointGeom, ol.geom.Point,
						'sketchPointGeom should be an ol.geom.Point');
					sketchPointGeom.setCoordinates(coordinate);
				}
				var sketchLineGeom;
				if (geometry instanceof ol.geom.Polygon &&
					this.mode_ !== ol.interaction.DrawMode.POLYGON) {
					if (goog.isNull(this.sketchLine_)) {
						this.sketchLine_ = new ol.Feature(new ol.geom.LineString(null));
					}
					var ring = geometry.getLinearRing(0);
					sketchLineGeom = this.sketchLine_.getGeometry();
					goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString,
						'sketchLineGeom must be an ol.geom.LineString');
					sketchLineGeom.setFlatCoordinates(
						ring.getLayout(), ring.getFlatCoordinates());
				} else if (!goog.isNull(this.sketchLineCoords_)) {
					sketchLineGeom = this.sketchLine_.getGeometry();
					goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString,
						'sketchLineGeom must be an ol.geom.LineString');
					sketchLineGeom.setCoordinates(this.sketchLineCoords_);
				}
				this.updateSketchFeatures_();
			};
			draw.handleMoveEvent_ = function(event){
				var start = event.coordinate;
				var wo_tolerance = 50;
				var wo_start_meter = ol.proj.fromLonLat(start);
				var wo_extent = ol.proj.transformExtent([wo_start_meter[0] - wo_tolerance, wo_start_meter[1] - wo_tolerance, wo_start_meter[0] + wo_tolerance, wo_start_meter[1] + wo_tolerance], "EPSG:3857", "EPSG:4326");
				if (this.mode_ === ol.interaction.DrawMode.LINE_STRING) {
					source.forEachFeatureIntersectingExtent(wo_extent, function(feature) {
						if (feature.getGeometry() instanceof ol.geom.Point) {
							console.log(feature);
							MapUtil.flash(feature);
						}
					});
				}
			};
			map.addInteraction(draw);
		
		</script>
	</body>

</html>